<?php


?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
		</style>
		<script type="text/javascript">

$(function () {
        <?php 
            echo "var analytics = $analytics_json;";
        ?>
        console.log(analytics);

    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Top 10 Homebased Companies'
        },
        exporting: { 
        	enabled: false 
        },
        subtitle: {
            text: 'Based on Views and Reviews'
        },
        xAxis: [{
            categories: analytics.categories
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: 'Reviews & Followers',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Visitors',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        series: [{
            name: ' Visitors',
            type: 'column',
            yAxis: 1,
            data: analytics.visitors,
            tooltip: {
                valueSuffix: 'Visitors'
            }

        }, {
            name: 'Reviews',
            type: 'spline',
            data: analytics.reviews_followers,
            tooltip: {
                valueSuffix: 'Reviews and Followers'
            }
        }]
    });
});
</script>

<script type="text/javascript">

$(function () {
    /**
     * Create a constructor for sparklines that takes some sensible defaults and merges in the individual
     * chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
     */
    Highcharts.SparkLine = function (options, callback) {
        var defaultOptions = {
            chart: {
                renderTo: (options.chart && options.chart.renderTo) || this,
                backgroundColor: null,
                borderWidth: 0,
                type: 'area',
                margin: [2, 0, 2, 0],
                width: 120,
                height: 20,
                style: {
                    overflow: 'visible'
                },
                skipClone: true
            },
            title: {
                text: ''
            },
                    exporting: { 
        	enabled: false 
        },
            credits: {
                enabled: false
            },
            xAxis: {
                labels: {
                    enabled: false
                },
                title: {
                    text: null
                },
                startOnTick: false,
                endOnTick: false,
                tickPositions: []
            },
            yAxis: {
                endOnTick: false,
                startOnTick: false,
                labels: {
                    enabled: false
                },
                title: {
                    text: null
                },
                tickPositions: [0]
            },
            legend: {
                enabled: false
            },
            tooltip: {
                backgroundColor: null,
                borderWidth: 0,
                shadow: false,
                useHTML: true,
                hideDelay: 0,
                shared: true,
                padding: 0,
                positioner: function (w, h, point) {
                    return { x: point.plotX - w / 2, y: point.plotY - h};
                }
            },
            plotOptions: {
                series: {
                    animation: false,
                    lineWidth: 1,
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    marker: {
                        radius: 1,
                        states: {
                            hover: {
                                radius: 2
                            }
                        }
                    },
                    fillOpacity: 0.25
                },
                column: {
                    negativeColor: '#910000',
                    borderColor: 'silver'
                }
            }
        };
        options = Highcharts.merge(defaultOptions, options);

        return new Highcharts.Chart(options, callback);
    };

    var start = +new Date(),
        $tds = $("td[data-sparkline]"),
        fullLen = $tds.length,
        n = 0;

    // Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
    // can take some seconds, so we split the input into chunks and apply them in timeouts
    // in order avoid locking up the browser process and allow interaction.
    function doChunk() {
        var time = +new Date(),
            i,
            len = $tds.length,
            $td,
            stringdata,
            arr,
            data,
            chart;

        for (i = 0; i < len; i += 1) {
            $td = $($tds[i]);
            stringdata = $td.data('sparkline');
            arr = stringdata.split('; ');
            data = $.map(arr[0].split(', '), parseFloat);
            chart = {};

            if (arr[1]) {
                chart.type = arr[1];
            }
            $td.highcharts('SparkLine', {
                series: [{
                    data: data,
                    pointStart: 1
                }],
                tooltip: {
                    headerFormat: '<span style="font-size: 10px">' + $td.parent().find('th').html() + ', Q{point.x}:</span><br/>',
                    pointFormat: '<b>{point.y}.000</b> USD'
                },
                chart: chart
            });

            n += 1;

            // If the process takes too much time, run a timeout to allow interaction with the browser
            if (new Date() - time > 500) {
                $tds.splice(0, i + 1);
                setTimeout(doChunk, 0);
                break;
            }

            // Print a feedback on the performance
            if (n === fullLen) {
                $('#result').html('Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms');
            }
        }
    }
    doChunk();

});
</script>

<script type="text/javascript">
  $(document).ready(function(){
	$("#comratelist").jRating({
	  isDisabled : true,
	  length : 5, // nb of stars
	  decimalLength:1 // number of decimal in the rate
	});
  });
</script>


<script src="<?=BASE_URI ?>highcharts/js/highcharts.js"></script>
<script src="<?=BASE_URI ?>highcharts/js/modules/exporting.js"></script>

<div class="profile-dn row">
	<div class="profile-wall medium-10 medium-centered column">

		<div class="medium-12 column" style="padding:0;">
			<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
			<div class="" style="background:#8CC152;border-radius:.25rem .25rem 0 0;padding:.5rem;">
				<h5 style="color:white;">How's this done?</h5>
			</div>
		</div>
		<div class="profile-left-wall medium-8 columns">
			<div id="result"></div>
			<table id="table-sparkline">
			    <thead>
			        <tr>
			            <th>Name</th>
			            <th>Location</th>
			            <th>Followers</th>
			            <th>Views per quarter</th>
			            <th>Review</th>
			            <th>Rank</th>
			        </tr>
			    </thead>
			    <tbody id="tbody-sparkline">
			     <?php $previous = 0; $count = 1 ; foreach ($for_display as $value) {?>
                    <tr>
			            <th><a href="<?=BASE_URI.'reviews?cname='.$value['name']?>"><?=$value['name']?></a></th>
			            <td><a><?=$value['location']?></a></td>
			            <td><?=$value['followers']?></td>
			            <td data-sparkline="71, 78, 39, 66 "/>
			            <td><div class="myforumrate" data-average="<?=$value['reviews']?>" data-id="<?=$value['company_id']?>" style="background:green;"></div></td>
			            <td>#<?=$value['ranking']?></td>
			        </tr>
			     <?php } ?>
			    </tbody>
			</table>
		
		</div>
		<div class="profile-right-wall medium-5 large-4 column">
			<div class="medium-12 column" style="padding:0 0 .5rem 0;">
				<strong>Filter Result</strong>
			</div>
		    <div class="large-3 columns" style="padding:0;">
        		<select style="border-radius:.35rem 0 0 .35rem;">
		          <option value="husker">A-Z</option>
		          <option value="starbuck">Z-A</option>
		        </select>
		    </div>
		    <div class="large-5 columns" style="padding:0;">
        		<select>
		          <option value="husker">Most Followed</option>
		          <option value="starbuck">Ascending</option>
		          <option value="hotdog">Descending</option>
		        </select>
		    </div>
		    <div class="large-4 columns" style="padding:0;">
		        <select style="border-radius:0 .35rem .35rem 0;">
		          <option value="husker">Reviews</option>
		          <option value="starbuck">5 Star</option>
		          <option value="hotdog">4 Star</option>
		          <option value="apollo">3 Star</option>
		          <option value="hotdog">2 Star</option>
		          <option value="apollo">1 Star</option>
		        </select>
		    </div>
		    <div class="large-12 columns" style="padding:0;">
		    <input type="text" placeholder="Company Name" style="border-radius:.35rem;">
		    </div>
		    <div class="text-right medium-12 column" style="padding:0;">
		    	<a class="tiny radius button">Apply Filter</a>
		    </div>
		</div>

	</div>
</div>
<style>
body {
	background: white !important;
}
</style>


	<!-- JS to add -->
<script type="text/javascript">
  $(document).ready(function(){
	$(".myforumrate").jRating({
	  isDisabled : true,
	  length : 5, // nb of stars
	  decimalLength:1 // number of decimal in the rate
	});
  });
</script>

    <link rel="stylesheet" href="<?= BASE_URI ?>jRating-master/jquery/jRating.jquery.css" type="text/css" />
    <script type="text/javascript" src="<?= BASE_URI ?>jRating-master/jquery/jRating.jquery.js"></script>
    <script src="<?= BASE_URI ?>js/foundation.min.js"></script>
    <script src="<?= BASE_URI ?>js/jquery-ui.js"></script>